<template>
   <div class="batdetail">
     <wxc-minibar class="border-bottom" title="投注订单详情">
      <!-- <image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px;"></image>
      <div class="header-con" slot="middle">
        <text class="header-title">投注订单详情</text>
      </div> -->
    </wxc-minibar>

    <scroller class="scroller" style="position:fixed;top:100px;bottom:0;left:0;right:0;background-color: #F5F5F5;">
    <div class="batdetail_desc">
       <div class="batdetail_desc_fl">
          <text style="font-size: 30px;color:rgb(147,147,147);margin-top:32px;">投注金额</text>
          <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-top:21px;margin-bottom:32px;">{{moeny}}元</text>
       </div>
       <div class="batdetail_desc_md">
          <text style="font-size: 30px;color:rgb(147,147,147);margin-top:32px;">状态</text>
          <!-- <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-top:21px;margin-bottom:32px;">待开奖</text> -->
           <text v-if="statusDescribe==101" style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-top:21px;margin-bottom:32px;">待支付</text>
           <text v-if="statusDescribe==601" style="font-family: PingFangSC-Medium;font-size: 32px;color: #E70D0D;margin-top:21px;margin-bottom:32px;">已派奖</text>
           <text v-if="statusDescribe==301" style="font-family: PingFangSC-Medium;font-size: 30px;color: #333333;margin-top:21px;margin-bottom:32px;">待开奖</text>
           <text v-if="statusDescribe==201" style="font-family: PingFangSC-Medium;font-size: 30px;color: #333333;margin-top:21px;margin-bottom:32px;">出票中</text>
           <text v-if="statusDescribe==501" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;margin-top:21px;margin-bottom:32px;">未中奖</text>
           <text v-if="statusDescribe==702" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;margin-top:21px;margin-bottom:32px;">过期</text>
           <text v-if="statusDescribe==801" style="font-family: PingFangSC-Medium;font-size: 30px;color: #E70D0D;margin-top:21px;margin-bottom:32px;">出票失败</text>
           <text v-if="statusDescribe==401" style="font-family: PingFangSC-Medium;font-size: 32px;color: #E70D0D;margin-top:21px;margin-bottom:32px;">中奖了</text>
           <text v-if="statusDescribe==701" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;margin-top:21px;margin-bottom:32px;">撤单</text>
           <text v-if="statusDescribe==703" style="font-family: PingFangSC-Medium;font-size: 30px;color: #A7A7A7;margin-top:21px;margin-bottom:32px;">撤单</text>
       </div>
       <div class="batdetail_desc_fr">
          <text style="font-size: 30px;color:rgb(147,147,147);margin-top:32px;">方案编号</text>
          <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-top:21px;margin-bottom:32px;">{{schemeId.length > 6 ? `${schemeId.substr(0, 6)}...` : schemeId}}</text>
       </div>
    </div>
    <!-- 表格布局 -->
    <div class="batdetail_table">
      <div class="batdetail_table_title">
         <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">投注详情</text>
      </div>
      <arrow35 v-if="lottoId==3||lottoId==4||lottoId==5" :tablelist="tablelist" :multiple="multiple"></arrow35>
      <dobble-ball v-if="lottoId==1||lottoId==2" :tablelist="tablelist" :multiple="multiple" :lotteryId="lottoId"></dobble-ball>
      <div class="table_subdesc">
        <text style="font-size: 24px;color: #A7A7A7;margin-right:10px;" v-if="lottoId==1">双色球,</text>
        <text style="font-size: 24px;color: #A7A7A7;margin-right:10px;" v-if="lottoId==2">超级大乐透,</text>
        <text style="font-size: 24px;color: #A7A7A7;">共{{schemeNumberUnit}}注，追{{perids}}期</text>
      </div>
    </div>
    <!-- 表格布局结束 -->
    <!-- 开奖信息折叠栏开始 -->
    <div class="batdetail_lotteryinfo" v-if="statusDescribe!=701&&statusDescribe!=702"> 
      
      <div class="batdetail_lotteryinfo_title">
         <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">开奖信息</text>
      </div>
      <div style="position:relative;" v-for="(item,index) in lotterylist" :key="index" class="backgroud0">
            <div class="showtab" @click="tabactive(item,index)" :class="[index%2===0?'backgroud1':'backgroud2']">
              <div class="showtabcontent_fl">
                 <text style="font-size: 30px;color: #333333;" v-if="item.lotteryId==1">双色球</text>
                 <text style="font-size: 30px;color: #333333;" v-if="item.lotteryId==2">超级大乐透</text>
                 <text style="font-size: 30px;color: #333333;">第{{item.issueIssue}}期</text>
              </div>
              <div class="arrowposition" :style="{opacity: !item.status ? 1: 0}">
                 <image style="width:24px;height:13px; font-size:10px" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/downshow.png"></image>
              </div>
              <div class="arrowposition1" :style="{opacity: item.status ? 1: 0}">
                 <image style="width:48px;height:48px; font-size;14px"  src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/arrowupred.png"></image>
              </div>
            </div>
            <div class="showcontent" v-if="item.status" :class="[index%2===0?'backgroud1':'backgroud2']">
                <div class="number">
                    <div class="bGroup">
                      <text class="forward" v-for="(item1,index) in item.forward" :key="index+1/9">{{item1}}</text>
                      <text class="backward" v-for="(item1,index) in item.backward" :key="index+1/10">{{item1}}</text>
                    </div>
                </div>
                <div v-if="item.statusDescribe==401||item.statusDescribe==601">
                  <div class="lottery_money">
                    <text style="font-size:28px;color:#333333;font-family: PingFangSC-Medium;">中奖总金额：</text>
                    <text style="font-size:32px;color:rgb(217,76,68);">{{item.prize}}</text>
                    <text style="font-size:28px;color:#333333;font-family: PingFangSC-Medium;">元</text>
                  </div>
                  <div class="lottery_thead">
                    <div class="lottery_thead_item"><text style="font-size: 24px;color: #666666;">奖项</text></div>
                    <div class="lottery_thead_item"> <text style="font-size: 24px;color: #666666;">中奖注数</text></div>
                    <div class="lottery_thead_item"><text style="font-size: 24px;color: #666666;">奖金(元)</text></div>
                    <div class="lottery_thead_item1"> <text style="font-size: 24px;color: #666666;">税后奖金(元)</text></div>
                  </div>
                  <div v-for="(i,index) in item.prizeDetail" :key="index/11">
                    <div class="lottery_tbody">
                      <div class="lottery_thead_item"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{i.level}}</text></div>
                      <div class="lottery_thead_item">
                        <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{i.number}}注</text>
                        <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;" v-if="item.append == 1">加追</text>
                      </div>
                      <div class="lottery_thead_item"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{i.money}}</text></div>
                      <div class="lottery_thead_item1"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{i.afterMoney}}</text></div>
                  </div>
                  </div>
                  <div class="lottery_total">
                      <div class="lottery_thead_item"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">合计</text></div>
                      <div class="lottery_thead_item"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{item.numbertotal}}注</text></div>
                      <div class="lottery_thead_item"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{item.moneytotal}}</text></div>
                      <div class="lottery_thead_item1"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{item.afterMoneytotal}}</text></div>
                  </div>
                </div>
                <div class="nozhongjiang" v-if="item.statusDescribe!=401&&item.statusDescribe!=601&&!item.waitlottery">
                   <text style="font-size: 24px;color: #444444;">很遗憾，您购买的号码未能中奖</text>
                </div>
                <div class="nozhongjiang" v-if="item.waitlottery">
                   <text style="font-size: 24px;color: #444444;">等待开奖</text>
                </div>
            </div>
            <image class="lottery_img" v-if="item.status&&item.statusDescribe==401" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/zhongjiang.png"></image>
             <image class="lottery_img" v-if="item.status&&item.statusDescribe==601" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/alreadyprice.png"></image>
      </div>
    </div>
     <!-- 开奖信息折叠栏结束 -->
    </scroller>
   </div>
</template>

<script>
const modal = weex.requireModule("modal");
import {
  postResponse,
  postResponses,
  getResponse,
  getResponses,
  testapi
} from "@/api.js";
import { debug } from "util";
import { jsonAnalysis } from "@/utils/index.js";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
var sxglobalEvent = weex.requireModule("globalEvent");
import arrow35 from "@/components/modules/table-item/arrow3_5";
import dobbleBall from '@/components/modules/table-item/dobble_colorball'
import { lotteryTypes } from '@/js/global/index_data'
export default {
  data() {
    return {
      money: "",
      status: null,
      multiple: "",
      schemeId: "",
      lottoId: "",
      perids: "",
      prizeDetails: '',
      schemeNumberUnit: "",
      betContent: "",
      waitlottery: false,
      statusDescribe: "",
      pagesize: 20, // 一页显示多少条
      pageindex: 1, //当前页
      batdetaillist: [],
      tablelist: [],
      lotterylist: [],
      tableHeadData: ["序号", "前区", "后区", "备注", "倍数"]
    };
  },
  created() {
    let personalDetails = jsonAnalysis( weex.config.bundleUrl.split("?")[1]);

    this.moeny = personalDetails.money;
    this.statusDescribe = personalDetails.statusDescribe;
    this.schemeId = personalDetails.schemeId;
    this.lottoId = lotteryTypes[personalDetails.lotteryNo].id;
    var betContent = JSON.parse(personalDetails.betContent);
    this.schemeNumberUnit = personalDetails.schemeNumberUnit;

    

    this.multiple = personalDetails.multiple;
    this.perids = personalDetails.issueSum;

    let prizeDetails = JSON.parse(personalDetails.prizeDetails)

    if(this.lottoId ==1 || this.lottoId ==2){ // 双色球  大乐透
       this.filter_ball(betContent)
    } else if(this.lottoId ==3 || this.lottoId ==4 || this.lottoId ==5){
        
        if (this.lottoId == 3 || this.lottoId == 4) {  //福彩3d  排列三
           this.filterarrow_3_4(betContent)
        } else if(this.lottoId == 5) { // 排列五
            this.filterarrow_5(betContent)
        }
    } else {
      modal.alert({ message: `参数错误` });
    }

    this.drawlottery(prizeDetails)
  },

  components: {
    WxcMinibar,
    arrow35,
    dobbleBall
  },

  methods: {
    filter_ball(betContent){ // 大乐透 双色球
      this.tablelist = betContent.map((i,index)=>{
        var redball = i.redBall.split(',');
        var blueBall = i.blueBall.split(',');
        var danRedBall = i.danRedBall ? i.danRedBall.split(',') : [];
        var danBlueBall = i.danBlueBall ? i.danBlueBall.split(',') : [];
        var tuoRedBall = redball.filter(ii => !danRedBall.includes(ii));
        var tuoblueBall = blueBall.filter(iii => !danBlueBall.includes(iii));
        return {
          danRedBall: danRedBall,
          danBlueBall: danBlueBall,
          tuoRedBall: tuoRedBall,
          tuoblueBall: tuoblueBall,
          redball: redball,
          blueBall: blueBall,
          type: this.filtertype(i.numberType)
        };
    })
    },
    filterarrow_3_4(betContent){ //福彩3D 排列三
        this.tablelist = betContent.map((i, index1) => {
        if (i.numberType == 1) {
          //直选
          if (i.hundred.split(',').length > 1 || i.ten.split(',').length > 1 || i.ge.split(',').length > 1) {
            // i.type = "组三直选复式";
            return {
               type: '直选复式',
               number: i.hundred + "-" + i.ten + "-" + i.ge
            }
          } else {
            return {
               type: '直选单式',
               number: i.hundred + "-" + i.ten + "-" + i.ge
            }
          }
        //   i.number = i.hundred + "-" + i.ten + "-" + i.ge
        } else if (i.numberType == 2) {
          //组三单式
        //   i.number = i.chong + i.chong + i.dan;
        //   i.type = "组三单式";
          return {
               type: '组三单式',
               number: i.chong + i.chong + i.dan
          }
        } else if (i.numberType == 3) {
          //组三复式
          if (i.no && i.dan) {
            //组三胆拖
            i.tuo = i.no.split(',').filter(ii => !i.dan.split(',').includes(ii));
            // i.type = "组三胆拖";
            i.number = "胆" + i.dan + "拖" + i.tuo.join();
            return {
                number:  i.number,
                type: "组三胆拖"
            }
          } else {
            //组三复式
            // i.type = "组三复式";
            i.number = i.no
             return {
                number:  i.number,
                type: "组三复式"
            }
          }
        } else if (i.numberType == 4) {
          //组六单式
          if (i.no.split(',').length == 3 && !i.dan) {
            // i.type = "组六单式";
            return {
                number:  i.no,
                type: "组六单式"
            }
          } else {
            if (i.no && i.dan) {
              // 组六胆拖
              i.tuo = i.no.split(',').filter(ii => !i.dan.split(',').includes(ii));
              i.type = "组六胆拖";
              i.number = "胆" + i.dan + "拖" + i.tuo.join();
              return {
                  number: i.number,
                  type:i.type
              }
            } else {
              //  组六复式
              i.type = "组六复式";
              i.number = i.no
              return {
                  number: i.number,
                  type:i.type
              }
            }
          }
        }
      });

    },
    filterarrow_5(betContent){  //排列五
     
       this.tablelist = betContent.map((i,index)=>{
        if (i.numberType == 5) {
          //直选
          if (i.wan.split(',').length > 1 || i.thousand.split(',').length > 1 || i.hundred.split(',').length > 1 || i.ten.split(',').length > 1 || i.ge.split(',').length > 1) {
            i.type = "直选复式";
            i.number =i.wan + "-" + i.thousand + "-" + i.hundred + "-" + i.ten + "-" + i.ge

            return{
                type:i.type,
                number:i.number
            }
          } else {
            i.type = "直选单式";
            i.number =i.wan + "-" + i.thousand + "-" + i.hundred + "-" + i.ten + "-" + i.ge
            return{
                type:i.type,
                number:i.number
            }
          }
        } else {
           modal.alert({ message: `无法识别的类型` });
        }
      })
    },
    drawlottery(prizeDetails){
       prizeDetails.forEach((item,index)=>{
          if(item.drawNumber ==null || item.drawNumber == ""){
             item.waitlottery = true
          }
          if(item.drawNumber){
            item.waitlottery = false

            if(item.drawNumber.indexOf('+')>-1){
              item.forward = item.drawNumber.split("+")[0];
              item.forward = item.forward.split(",");
              item.backward = item.drawNumber.split("+")[1];
              item.backward = item.backward.split(",");
            } else {
              item.forward = item.drawNumber.split(",");
            }
          }
          item.status = false
          let prizeDetail = item.prizeDetail ? JSON.parse(item.prizeDetail):''
          if(prizeDetail){
            let moneytotal = 0
            let numbertotal = 0
            let afterMoneytotal = 0
            var prizeDetaildata = []
            for(var key in prizeDetail){
              let priceobj = {}
              for(var key1 in prizeDetail[key]){
                if(key1=='level'){
                  priceobj.level = prizeDetail[key][key1]
                }
                if(key1=='money'){
                   moneytotal = prizeDetail[key][key1] + moneytotal
                   priceobj.money = prizeDetail[key][key1]
                }
                if(key1 =='number'){
                   numbertotal = prizeDetail[key][key1]+ numbertotal
                   priceobj.number = prizeDetail[key][key1]
                }
                if(key1=='afterMoney'){
                   priceobj.afterMoney = prizeDetail[key][key1]
                   afterMoneytotal = prizeDetail[key][key1] + afterMoneytotal
                }
              }
              prizeDetaildata.push(priceobj)
            }
             item.moneytotal = moneytotal
             item.numbertotal = numbertotal
             item.afterMoneytotal= afterMoneytotal
             item.prizeDetail= prizeDetaildata
          }
       })
        this.lotterylist = prizeDetails
    },
    filtertype(type){
      let numbertype= ''
      switch (type) {
        case 6:
          numbertype = "胆拖";
          break;
        case 7:
          numbertype = "复式";
          break;
        case 8:
          numbertype = "单式";
          break;
      }
      return numbertype

    },
    formatNum(num) {
      if (num < 10) return "0" + num;
      return num.toString();
    },

    tabactive(val, index) {
      val.status = !val.status;
      this.$set(this.lotterylist[index], 'status', val.status);
    }
  }
};
</script>
<style scoped>
.batrecord {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(245, 245, 245);
}
.header {
  width: 750px;
  height: 90px;
  background-color: #fff;
  background: #ffffff;
  box-shadow: 0 4px 15px 0 rgba(229, 229, 229, 0.5);
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header-img {
  position: absolute;
  left: 32px;
  top: 34px;
  margin-left: 0;
}
.header-title {
  font-size: 34px;
  color: #fff;
}
.lottery_img {
  position: absolute;
  width: 200px;
  height: 129px;
  top: -60px;
  right: 80px;
}
.batdetail_desc {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 4px;
}
.batdetail_desc_fl {
  flex: 1;
  flex-direction: column;
  align-items: center;
}
.batdetail_desc_md {
  flex-direction: column;
  flex: 1;
  align-items: center;
}
.batdetail_desc_fr {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.number {
  padding-left: 72px;
  padding-right: 72px;
}
.batdetail_lotteryinfo {
  margin-top: 24px;
}
.showtab {
  width: 750px;
  height: 88px;
  align-items: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.arrowposition {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: 32px;
}
.arrowposition1 {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  right: 32px;
}
.showcontent {
  box-shadow: 4px 0 0 15px rgba(229, 229, 229, 0.5);
  margin-top: 2px;
}
.showtabcontent_fl {
  margin-left: 32px;
  display: flex;
  flex-direction: row;
}
.showtabcontent_fr {
  margin-right: 32px;
}
.backgroud0 {
  background-color: rgba(229, 229, 229, 0.5);
}
.backgroud1 {
  background-color: #fff3f3;
}
.backgroud2 {
  background-color: white;
}
.bGroup {
  padding: 24px 0 32px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.forward {
  color: #333333;
  font-size: 32px;
  font-family: PingFangSC-Medium;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  border-color: #a7a7a7;
}
.backward {
  font-family: PingFangSC-Medium;
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1c5aaf;
  color: #076bf2;
}
.lottery_money {
  height: 96px;
  margin-top: 32px;
  margin-left: 32px;
  margin-right: 32px;
  border-style: solid;
  border-color: #666666;
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.lottery_thead {
  height: 60px;
  margin-left: 32px;
  margin-right: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  border-bottom-width: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 32px;
}
.lottery_tbody {
  margin-bottom: 32px;
  margin-left: 32px;
  margin-right: 32px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.lottery_total {
  height: 64px;
  margin-left: 32px;
  margin-right: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  border-bottom-width: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 32px;
}
.batdetail_table {
  background-color: white;
  border-radius: 4px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.batdetail_lotteryinfo_title {
  height: 109px;
  background-color: white;
  justify-content: center;
  align-items: center;
}
.lottery_thead_item {
  width: 150px;
  justify-content: center;
  align-items: center;
}
.lottery_thead_item1 {
  width: 200px;
  justify-content: center;
  align-items: center;
}
.nozhongjiang {
  margin-left: 72px;
  margin-bottom: 48px;
}

.table_subdesc {
  padding-left: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.batdetail_table_title {
  margin-top: 32px;
  margin-bottom: 24px;
  margin-left:32px;  
  justify-content: center;
  align-items: center;
}

 .header-con {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    flex-direction: row;
  }
  .header-title {
    font-size: 34px;
    color: #fff;
    font-weight: 600;
    font-family: PingFangSC-Medium;
  }
  .border-bottom {
    border-bottom-color: #f1f1f1;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
</style>